﻿<UserControl x:Class="EasySL.Controls.ProgressSlider"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    >
    <UserControl.Resources>
        <Style x:Name="ThumbStyle1" 
               TargetType="Thumb"
               xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Thumb">
                        <Grid x:Name="Root">
                            <vsm:VisualStateManager.VisualStateGroups>
                                <vsm:VisualStateGroup>
                                    <vsm:VisualStateGroup.Transitions>
                                        <vsm:VisualTransition To="Normal" GeneratedDuration="0:0:0.1" />
                                    </vsm:VisualStateGroup.Transitions>
                                    <vsm:VisualState x:Name="Normal" />
                                    <vsm:VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <ColorAnimation Duration="0"
                                                Storyboard.TargetName="outerCircleFill"
                                                Storyboard.TargetProperty="Color"
                                                To="Gray" />
                                        </Storyboard>
                                    </vsm:VisualState>
                                </vsm:VisualStateGroup>
                            </vsm:VisualStateManager.VisualStateGroups>
                            <Rectangle x:Name="OuterCircle" Stretch="Fill" RadiusX="2" RadiusY="2">
                                <Rectangle.Fill>
                                    <SolidColorBrush x:Name="outerCircleFill" Opacity="0.5" Color="Black" />
                                </Rectangle.Fill>
                            </Rectangle>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style TargetType="Slider" 
               x:Name="SliderStyle1"
               xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows">

            <!-- Any other properties you want to set -->
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Slider">
                        <Grid x:Name="Root">
                            <!-- States -->
                            <Grid.Resources>
                                <!-- RepeatButton Templates -->
                                <ControlTemplate x:Key="RepeatButtonTemplate">
                                    <Grid x:Name="Root" Background="Transparent" Opacity="0" />
                                </ControlTemplate>
                            </Grid.Resources>

                            <vsm:VisualStateManager.VisualStateGroups>
                                <vsm:VisualStateGroup x:Name="CommonStates">
                                    <vsm:VisualStateGroup.Transitions>

                                    </vsm:VisualStateGroup.Transitions>
                                    <vsm:VisualState x:Name="Normal" />
                                    <vsm:VisualState x:Name="MouseOver" />
                                    <vsm:VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0:0:0" Storyboard.TargetName="Root" Storyboard.TargetProperty="Opacity" To="0.5" />
                                        </Storyboard>
                                    </vsm:VisualState>

                                </vsm:VisualStateGroup>
                            </vsm:VisualStateManager.VisualStateGroups>

                            <!-- Horizontal Template -->
                            <Grid x:Name="HorizontalTemplate">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>

                                <!-- Track Layer -->
                                <!-- Customized: made taller, transparent, rounded corners-->

                                <!-- Repeat Buttons + Thumb -->
                                <RepeatButton x:Name="HorizontalTrackLargeChangeDecreaseRepeatButton" Grid.Column="0" Template="{StaticResource RepeatButtonTemplate}" IsTabStop="False" />
                                <Thumb x:Name="HorizontalThumb" Cursor="hand" Width="8" Grid.Column="1" Style="{StaticResource ThumbStyle1}" />
                                <RepeatButton x:Name="HorizontalTrackLargeChangeIncreaseRepeatButton" Grid.Column="2" Template="{StaticResource RepeatButtonTemplate}" IsTabStop="False" />
                                <Rectangle Stroke="Black" StrokeThickness="1" Grid.Column="0" Grid.ColumnSpan="3"  Margin="4,2,4,2" />
                            </Grid>


                            <!-- Focus indicator (don't want)
                            <Rectangle 
                                x:Name="FocusVisual" 
                                Stroke="#666666" 
                                StrokeDashArray=".2 5"
                                StrokeDashCap="Round" 
                                IsHitTestVisible="false" /> -->
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot" Width="185" Height="12">
        <Rectangle x:Name="downloadBackground" Fill="Gray" Margin="4,2,4,2"  />
        <Rectangle x:Name="downloadProgress" Width="50" Fill="Orange" Margin="4,2,4,2" HorizontalAlignment="Left"/>
        <Slider x:Name="slider" Style="{StaticResource SliderStyle1}" IsTabStop="False" />
    </Grid>
</UserControl>
